<!doctype html>
<html lang="en">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Route with Toll Cost</title>
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script>
	</script>
	<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
	<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
	<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
	<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
	<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.1/mapsjs-clustering.js"></script>
	<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.1/mapsjs-data.js"></script>
	<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
  <!-- Custom Style sheet to try-->
  <link rel="stylesheet" type="text/css" href="main.css" />
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
  <script src="include.js"></script>
</head>

<body>	
	<div class="ctrl-panel">
		<div class="form-horizontal">
			<div class="form-group row">
				<div class="col-sm-12">
					<input required  type='text' id='start' class='form-control ' value='' placeholder="From"
						onkeydown="if (event.keyCode == 13)startRouteCalculation();">
				</div>
			</div>
			<div class="form-group row">
				<div class="col-sm-12">
					<input type='text' id='dest' class='form-control' size='40' value='' required placeholder="To"
						onkeydown="if (event.keyCode == 13)startRouteCalculation();" />
				</div>
			</div>
			<div class="form-group" style="display: none;">
				<div class="checkbox">
					<label><input type="checkbox" id="chkEnableDTFiltering" name="chkEnableDTFiltering"
							onclick="handleDateTimeFilteringClicked()">Enable datetime filtering</label>
				</div>
			</div>
		</div>
		<div class="form-horizontal">
				<div class="form-group row">
					<div class="col-sm-12">
							<select id="vehicles" class="form-control" 
						onkeydown="if (event.keyCode == 13)startRouteCalculation();" required onchange="
					(true)">
						<option value="2" selected="true">Car</option>
						<option value="3">Truck</option>
						<option value="9">Delivery Truck</option>
					
					</select>
					</div>
					<div class="col-smsdsds-6">
							<input type='hidden' id='nrOfTotalTires' class="form-control" required  value='4'
							onkeydown="if (event.keyCode == 13)startRouteCalculation();"
							onchange="setUserdefinedVehicleSpec(true)" />
					</div>
				</div>
			</div>
	
		<div class="form-horizontal">
			<div class="form-group row">
				<div class="col-sm-12">
				
						<select id="currency" class="form-control" 
						onkeydown="if (event.keyCode == 13)startRouteCalculation();" required onchange="
					(true)">
					<option value="USD" selected="true">USD</option>
					<option value="INR">INR</option>
					<option value="EUR">EUR</option>
					<option value="CNY">CNY</option>
				</select>
				</div>
			</div>
		</div>
		
		
		<table style="display: none" border="0" class="form-group">
			<tr style="display: none">
				<td style="font-weight: bold;">Route Alternatives:</td>
				<td colspan="3">
						<select id="routeAlternatives" class="form-control" style="width:312px;"
						onkeydown="if (event.keyCode == 13)startRouteCalculation();">
						<option value="0">0</option>
						<option value="1">1</option>
						<option value="2" selected="true">2</option>
					</select>
				</td>
			</tr>
			
			<tr style="display:none">
				<td>Trailer Type</td>
				<td>
					<select id="trailerType" class="form-control" style="width:89px;"
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)">
						<option value="0" selected="true">None</option>
						<option value="1">Caravan</option>
						<option value="2">Trailer</option>
					</select>
				</td>
				<td>Trailer Number</td>
				<td>
					<select id="trailerNr" class="form-control" style="width:89px;"
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)">
						<option value="0" selected="true">0</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3 or more</option>
					</select>
				</td>
			</tr>
			<tr style="display:none">
				<td>Vehicle Number Of Axles</td>
				<td><input type='text' id='nrOfAxlesVehicle' class="form-control" style="width:85px;" value='2'
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)" /></td>
				<td>Trailer Number Of Axles</td>
				<td><input type='text' id='nrOfAxlesTrailer' class="form-control" style="width:85px;" value='0'
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)" /></td>
			</tr>
			<tr style="display:none">
				<td>Hybrid</td>
				<td>
					<select id="hybrid" class="form-control" style="width:89px;"
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)">
						<option value="0" selected="true">No Hybrid</option>
						<option value="1">Hybrid</option>
					</select>
				</td>
				<td>Emission Type</td>
				<td>
					<select id="emissionType" class="form-control" style="width:89px;"
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)">
						<option value="1">EURO I</option>
						<option value="2">EURO II</option>
						<option value="3">EURO III</option>
						<option value="4">EURO IV</option>
						<option value="5" selected="true">EURO V</option>
						<option value="6">EURO VI</option>
						<option value="7">EURO EEV</option>
						<option value="8">Electric Vehicle</option>
					</select>
				</td>
			</tr>
			<tr style="display:none">
				<td>Vehicle Height</td>
				<td><input type='text' id='vehHeight' class="form-control" style="width:85px;" value='167'
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)" /></td>
				<td>Trailer Height</td>
				<td><input type='text' id='trailerHeight' class="form-control" style="width:85px;" value='0'
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)" /></td>
			</tr>
			<tr style="display:none">
				<td>Vehicle Weight</td>
				<td><input type='text' id='vehWeight' class="form-control" style="width:85px;" value='1739'
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)" /></td>
				<td>Total Weight</td>
				<td><input type='text' id='totalWeight' class="form-control" style="width:85px;" value='1739'
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)" /></td>
			</tr>
			<tr style="display:none">
				<td>Total Width</td>
				<td><input type='text' id='totalWidth' class="form-control" style="width:85px;" value='180'
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)" /></td>
				<td>Total Length</td>
				<td><input type='text' id='totalLength' class="form-control" style="width:85px;" value='441'
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)" /></td>
			</tr>
			<tr style="display:none">
				<td>Disabled Equipped</td>
				<td>
					<select id="disabledEquipped" class="form-control" style="width:89px;"
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)">
						<option value="0" selected="true">No</option>
						<option value="1">Yes</option>
					</select>
				</td>
				<td>Min Pollution</td>
				<td>
					<select id="minPollution" class="form-control" style="width:89px;"
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)">
						<option value="0" selected="true">No</option>
						<option value="1">Yes</option>
					</select>
				</td>
			</tr>
			<tr style="display:none">
				<td>HOV</td>
				<td>
					<select id="hov" class="form-control" style="width:89px;"
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)">
						<option value="0" selected="true">No</option>
						<option value="1">Yes</option>
					</select>
				</td>
				<td>Number Passengers</td>
				<td><input type='text' id='nrPassengers' class="form-control" style="width:85px;" value='2'
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)" /></td>
			</tr>
			<tr style="display:none">
				<td>Commercial</td>
				<td>
					<select id="commercial" class="form-control" style="width:89px;"
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)">
						<option value="0" selected="true">No</option>
						<option value="1">Yes</option>
					</select>
				</td>
				<td>Hazardous Type</td>
				<td>
					<select id="hazardousType" class="form-control" style="width:89px;"
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)">
						<option value="0" selected="true">None</option>
						<option value="1">Explosives</option>
						<option value="2">Any Hazardous Material</option>
					</select>
				</td>
			</tr>
			<tr style="display:none">
				<td>Height above 1st axle</td>
				<td>
					<input type='text' id='heightAbove1stAxle' class="form-control" style="width:85px;" value='100'
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)" />
				</td>
				<td>Fuel Type</td>
				<td>
					<select id="fuelType" class="form-control" style="width:89px;"
						onkeydown="if (event.keyCode == 13)startRouteCalculation();"
						onchange="setUserdefinedVehicleSpec(true)">
						<option value="petrol" selected="true">Petrol</option>
						<option value="diesel">Diesel</option>
						<option value="lng">LNG</option>
						<option value="lpg">LPG</option>
						<option value="cng">CNG</option>
						<option value="ethanol">Ethanol</option>
						<option value="propane">Propane</option>
						<option value="hydrogen">Hydrogen</option>
						<option value="electric">Electric</option>
					</select>
				</td>
			</tr>
		</table>
		<div class="form-horizontal">
			<div class="form-group" style="text-align: center">
				<div class="col-sm-9">
					<input type="submit" id="routeButton2" class="btn btn-primary" value="submit" />
					<input type='hidden' hidden id='serverURL' class="form-control" style="width:230px;"
					value='https://tce.cit.api.here.com'
					onkeydown="if (event.keyCode == 13)startRouteCalculation();" />
		
				</div>
			</div>
		</div>
	
	
		
		
	<div id="feedbackTxt"></div>
</div>
<div id="infoBox" style="display: block;">
		<div class="card card text-white bg-dark mb-3" style="width: 18rem;">
				<div class="card-body">
				  <h5 class="card-title">Routes & Toll Gates</h5>
				  <!--<h6 class="card-subtitle mb-2 text-muted">This application will help us to calculate the toll gate cost for the available routes</h6>-->
				  <p class="card-text">When navigating, for some the cost of the journey is more important than the duration or route of the journey. With this map you can quickly map out 3 different paths that visually weigh duration of trip, length and the cost of the route. This map works both internationally and domestically.</p>
<p class="card-text">We hope you enjoy this little tool and if you are interested in making a map just like this, checkout the <a href="#" class="card-link">tutorial</a> where we walk you through the steps.</p>
<p class="card-text">Fill in the “From” and “To” fields to specify your destination then click “Submit” to view your options and pricing. This map uses HERE Technologies JavaScript SDK version 3.1 and the source is available <a href="#" class="card-link">here</a> .</p>
				 
				  
				</div>
			  </div>
</div>
<div id="mydiv">
		
	
	</div>
	<div id="mapContainer" class=""></div>
	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
		integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>

	<script src="mainHome.js" type="text/javascript"></script>

	</div>
	<footer>
</body>

</html>